<template>
  <div id="app">
    <h2>日常活动</h2>
    <div class="filters">
      <!-- 搜索 -->
      <input v-model="searchName" placeholder="搜索活动名称..." />
      <div class="filters-dropdown">
        <!-- 城市 -->
        <label for="type-select">城市：</label>
        <select v-model="searchCity">
          <option value="">全部</option>
          <option value="北京">北京</option><option value="天津">天津</option><option value="上海">上海</option><option value="重庆">重庆</option>
          <option value="江苏">江苏</option><option value="浙江">浙江</option><option value="江西">江西</option><option value="黑龙江">黑龙江</option><option value="新疆">新疆</option>
          <option value="香港">香港</option><option value="澳门">澳门</option><option value="广东">广东</option><option value="广西">广西</option>
          <option value="湖南">湖南</option><option value="湖北">湖北</option><option value="辽宁">辽宁</option><option value="宁夏">宁夏</option>
          <option value="河南">河南</option><option value="河北">河北</option><option value="山东">山东</option><option value="山西">山西</option>
          <option value="内蒙古">内蒙古</option><option value="吉林">河北</option><option value="安徽">安徽</option>
          <option value="青海">青海</option><option value="甘肃">甘肃</option><option value="陕西">陕西</option>
          <option value="福建">福建</option><option value="海南">海南</option><option value="台湾">台湾</option><option value="海外">海外</option>
        </select>
      </div>
      <div class="filters-dropdown">
        <!-- 类型 -->
        <label for="type-select">活动类型：</label>
        <select v-model="searchType">
          <option value="">全部</option>
          <option value="宠物领养">宠物领养</option>
          <option value="宠物照顾">宠物照顾</option>
          <option value="宠物救援">宠物救援</option>
          <option value="志愿者活动">志愿者活动</option>
          <option value="其它">其它</option>
        </select>
      </div>
    </div>

    <ul class="activity-list">
      <li v-for="(activity, index) in filteredActivities" :key="index">
        <div class="activity-header">
          <h3>{{ activity.activityname || '未命名活动' }}</h3>
          <p class="activity-type">
            {{ activity.activitytype || '未分类' }} | 
            {{ activity.city || '未指定城市' }}
          </p>
        </div>

        <div class="activity-details">
          <p>地点：{{ activity.location || '地点待定' }}</p>
          <p>活动日期：{{ activity.activitydate || '日期待定' }}</p>
          <p>活动详情：{{ activity.details || '暂无详细说明' }}</p>
          <p>当前报名人数：{{ activity.signeduppeople || 0 }}/{{ activity.requiredpeople || 0 }}</p>
        </div>

        <div>
          <button 
            :disabled="(isPastDate(activity.date)) || (activity.registeredPeople >= activity.requiredPeople && !activity.isRegistered)"
            @click="handleRegistration(activity.id)">
            {{ activity.isRegistered ? '取消报名' : '报名参加' }}
          </button>
          <p v-if="activity.isRegistered">你已报名此活动，已报名次数：{{ activity.registeredTimes }}，已取消次数：{{ activity.canceledTimes }}</p>
          <p v-if="activity.canceledTimes >= 3">你已取消报名3次，无法再报名。</p>
          <p v-if="activity.registeredPeople >= activity.requiredPeople && !activity.isRegistered">人数已满，无法报名</p>
          <p v-if="isPastDate(activity.date)">活动已结束，无法报名</p>
        </div>
      </li>
    </ul>

    <div class="sort-buttons">
      <button @click="sortActivities('asc')">按日期升序</button>
      <button @click="sortActivities('desc')">按日期降序</button>
    </div>
    <div v-if="filteredActivities.length === 0">
      <p>目前没有符合条件的日常活动。</p>
    </div>
  </div>
</template>

<script>
import { findStatus } from '../../api/user';
import { findAllActivitys } from '../../api/user'

export default {
  data() {
    return {
      isLoading: true,
      searchCity: '',
      searchType: '',
      searchName: '',
      sortOrder: 'asc',
      activities: []
    };
  },
  computed: {
    filteredActivities() {
      // 转换为小写进行不区分大小写的匹配
      const searchNameLower = this.searchName.toLowerCase();
      const searchCityLower = this.searchCity.toLowerCase();
      const searchTypeLower = this.searchType.toLowerCase();

      return this.activities
        .filter(activity => {
          return (
            (activity.name?.toLowerCase().includes(searchNameLower) || !this.searchName) &&
            (activity.city?.toLowerCase() === searchCityLower || !this.searchCity) &&
            (activity.type?.toLowerCase() === searchTypeLower || !this.searchType)
          );
        })
        .sort((a, b) => {
          const dateA = new Date(a.date);
          const dateB = new Date(b.date);
          return this.sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
        });
    }
  },
  methods: {
    async getActivities() {
      this.isLoading = true;
      const response = await findAllActivitys(
        this.searchName,
        this.searchType,
        this.searchCity
      );
      console.log(response.data.data);
          // 确保数据结构正确
      this.activities = response.data.data
    
    },
    isPastDate(date) {
      const currentDate = new Date();
      const activityDate = new Date(date);
      return activityDate < currentDate;
    },
    // 添加日期格式化方法
    formatDate(dateString) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(dateString).toLocaleDateString('zh-CN', options);
    },
    handleRegistration(activityId) {
      let activity = this.activities.find(act => act.id === activityId);
      if (this.isPastDate(activity.date)) {
        alert("活动已结束，无法报名");
        return;
      }
      if (activity.registeredPeople >= activity.requiredPeople) {
        // 如果人数已满，允许取消报名
        if (activity.isRegistered) {
          activity.isRegistered = false;
          activity.registeredPeople--;
          activity.canceledTimes++; 
        } else {
          alert("人数已满，无法报名");
        }
      } else {
        // 如果人数没有满，允许报名
        if (activity.canceledTimes < 3) {
          if (activity.isRegistered) {
            activity.isRegistered = false;
            activity.registeredPeople--;
            activity.canceledTimes++;
          } else {
            // 报名参加
            if (activity.registeredTimes < 3) {
              activity.isRegistered = true;
              activity.registeredPeople++;
              activity.registeredTimes++;
            }
          }
        } else {
          alert("已取消3次，无法再报名");
        }
      }
    },
    sortActivities(order) {
      this.sortOrder = order;
    }
    
  },mounted() {
    // 获取所有活动
    this.getActivities();
  }
};
</script>

<style scoped>
#app {
  font-family: 'Arial', sans-serif;
  background-color: #f4f7fa;
  margin: 0;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
h2 {
  font-size: 36px;
  text-align: center;
  color: #4f8a8b;
  margin-bottom: 20px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.filters .filters-dropdown {
  flex: 1 1 200px;
}
.filters input,
.filters select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.filters input {
  border-color: #4f8a8b;
}
.filters select {
  background-color: #f9f9f9;
}

.activity-list {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.activity-list:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.activity-header h3 {
  font-size: 24px;
  color: #4f8a8b;
}
.activity-type {
  background-color: #e0f7fa;
  padding: 5px 10px;
  border-radius: 15px;
  color: #00796b;
}
.activity-details {
  margin-top: 10px;
}
.activity-details p {
  font-size: 16px;
  color: #555;
}

button {
  background-color: #4f8a8b;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 0 10px;
  margin-top: 10px;
}
button:hover {
  background-color: #00796b;
}
 
.sort-buttons {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%); 
  display: flex;
  flex-direction: column; 
}

.sort-buttons button {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #4f8a8b;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  writing-mode: vertical-rl;
}

.sort-buttons button:hover {
  background-color: #00796b;
}

@media (max-width: 768px) {
.filters {
  flex-direction: column;
}
.filters .filters-dropdown {
  flex: 1 1 100%;
}
.pet-card {
  padding: 15px;
}
}
</style>